<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>小米登录</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				font-family:"微软雅黑";
			}
			
			.main,
			.big_top {
				width: 100%;
			}
			
			.top {
				width: 1130px;
				height: 98px;
				margin: 0 auto;
			}
			
			.big_content {
				width: 100%;
				height: 588px;
				background-color: #14212B;
			}
			
			.content {
				width: 1130px;
				height: 588px;
				margin: 0 auto;
				background-image: url(img/banner.jpg);
				position: relative;
			}
			
			.foot {
				width: 1130px;
				margin: 0 auto;
				height: 130px;
				font-size: 12px;
				color: #757575;
			}
			
			.foot li {
				list-style-type: none;
				display: inline;
			}
			
			.foot_top {
				margin-top: 72px;
			}
			
			.foot_bottom {
				margin-top: 18px;
			}
			
			.foot ul {
				overflow: hidden;
				text-align: center;
			}
			
			.foot li:hover a {
				color: black;
				cursor: pointer;
			}
			
			.foot_top span {
				margin: 0 10px;
			}
			
			.foot a {
				text-decoration: none;
				color: #757575
			}
			
			.login {
				width: 400px;
				height: 524px;
				background-color: white;
				position: absolute;
				right: 0;
				margin-top: 32px;
			}
			
			.login_top_title {
				width: 400px;
				height: 82px;
				font-size: 24px;
				line-height: 82px;
				color: #666666;
			}
			
			.login_top_title a {
				text-decoration: none;
				color: #666666;
			}
			
			.login_top_title ul {
				text-align: center;
			}
			
			.login_top_title li {
				list-style-type: none;
				display: inline;
			}
			
			#title_left {
				border-right: 1px solid #E0E0E0;
				padding-right: 34px;
			}
			
			#title_right {
				border-left: 1px solid #E0E0E0;
				padding-left: 34px;
			}
			
			.login_inputs input {
				outline: none;
				width: 309px;
				height: 20px;
				border: 1px solid #E0E0E0;
				padding: 14px 16px 14px 13px;
				margin-bottom: 11px;
			}
			
			.login_inputs {
				width: 400px;
				text-align: center;
				margin-top: 5px;
			}
			
			.login_inputs span {
				position: absolute;
				left: -94px;
				color: #f56600;
				font-size: 14px;
				line-height: 14px;
				left: 33px;
				display: none;
			}
			
			.login_inputs label {
				display: inline-block;
				width: 14px;
				height: 14px;
				border-radius: 50%;
				background-color: #F56600;
				color: white;
				margin-right: 5px;
			}
			
			.login_btn {
				width: 338px;
				height: 50px;
				color: white;
				font-size: 18px;
				background-color: #F56600;
				line-height: 50px;
				text-align: center;
				margin: 0 auto;
				margin-top: 27px;
			}
			
			.login_btn:hover {
				cursor: pointer;
			}
			
			.zhanghaodenglu {
				height: 440px;
			}
			
			#yincang {
				height: 443px;
				width: 400px;
				position: absolute;
				top: 80px;
				background-color: white;
				display: none;
			}
			
			#yincang img {
				position: absolute;
				top: 50px;
			}
			
			#title_left a {
				color: #F56600;
			}
			
			#title_right a {
				color: #666666;
			}
			
			#title_right:hover a {
				color: #f56600 !important;
			}
			
			#title_left:hover a {
				color: #f56600 !important;
			}
			
			.login_register {
				font-size: 14px;
				margin-top: 20px;
				/*border:  1px solid deepskyblue;*/
			}
			
			.login_register ul {
				text-align: center;
			}
			
			.login_register a {
				text-decoration: none;
				color: #999;
			}
			
			.login_register li {
				list-style-type: none;
				display: inline;
			}
			
			.login_register a:hover {
				color: #F56600;
			}
			
			#loginspan {
				color: #999;
				margin: 0 5px;
			}
			
			.qtfs {
				width: 338px;
				height: 20px;
				border-bottom: 1px solid #E0E0E0;
				margin: 0 auto;
				position: absolute;
				left: 32px;
				top: 421px;
			}
			
			.qtfs2 {
				color: #E0E0E0;
				font-size: 14px;
				position: absolute;
				left: 125px;
				top: 9px;
				background-color: white;
				padding: 0 5px;
			}
			
			.icon {
				width: 400px;
				/*border: 1px solid red;*/
				position: absolute;
				top: 465px;
			}
			
			.icon .ic {
				width: 30px;
				height: 30px;
				/*border: 1px solid red;*/
			}
			
			.icon ul {
				text-align: center;
			}
			
			.icon ul li {
				list-style-type: none;
				display: inline-block;
				margin: 0 14px;
			}
			
			#icon11 {
				background-image: url(img/qq.png);
			}
			
			#icon22 {
				background-image: url(img/weibo.png);
			}
			
			#icon33 {
				background-image: url(img/zhifubao.png);
			}
			
			#icon44 {
				background-image: url(img/weixin.png);
			}
			
			#icon11:hover {
				background-image: url(img/qq1.png);
				cursor: pointer;
			}
			
			#icon22:hover {
				background-image: url(img/weibo1.png);
				cursor: pointer;
			}
			
			#icon33:hover {
				background-image: url(img/zhifubao1.png);
				cursor: pointer;
			}
			
			#icon44:hover {
				cursor: pointer;
				background-image: url(img/weixin1.png);
			}
		</style>
	</head>

	<body>
		<div class="main">
			<div class="big_top">
				<div class="top">
					<img src="img/login_logo.png" />
				</div>
			</div>
			<div class="big_content">
				<div class="content">
					<div class="login">
						<div class="login_top_title">
							<ul>
								<li id="title_left">
									<a href="#" onclick="tile(this)">帐号登录</a>
								</li>
								<li id="title_right">
									<a href="#" onclick="tiri(this)">扫码登录</a>
								</li>
							</ul>
						</div>
						<div class="zhanghaodenglu">

							<form action="#" method="action" id="loginform">
								<div class="login_inputs">
									<input type="text" name="userid" id="userid" value="" onfocus="clearname()" onblur="checkusername(this)" placeholder="邮箱/手机号码/小米账号" />
									<input type="password" name="pwd" id="pwd" value="" onfocus="clearpwd()" onblur="pwdcheck(this)" placeholder="密码" /><br />
									<span id="jinggao" class="username">
									<label>!</label>请输入账号
								</span>
									<span id="usernamenocorrect" class="username">
									<label>!</label>用户名不正确
								</span>
									<span id="unpwd" class="username">
									<label>!</label>用户名或密码不正确
								</span>
									<span id="inputpwd" class="username">
									<label>!</label>请输入密码
								</span>
								</div>
								<div class="login_btn" onclick="tijiao()">
									立即登录
								</div>
							</form>
							<div class="login_register">
								<ul>
									<li>
										<a href="#">注册小米帐号</a>
									</li>
									<li id="loginspan">|</li>
									<li>
										<a href="#">忘记密码？</a>
									</li>
								</ul>
							</div>
							<div class="qtfs">
								<div class="qtfs2">
									其他方式登陆
								</div>
							</div>
							<div class="icon">
								<ul>
									<li id="icon1">
										<div id="icon11" class="ic">

										</div>
									</li>
									<li id="icon2">
										<div id="icon22" class="ic">

										</div>
									</li>
									<li id="icon3">
										<div id="icon33" class="ic">

										</div>
									</li>
									<li id="icon4">
										<div id="icon44" class="ic">

										</div>
									</li>
								</ul>
							</div>
						</div>
						<div id="yincang">
							<img src="img/2017-08-10_165413.png" />
						</div>
					</div>
				</div>
			</div>
			<div class="foot">
				<div class="foot_top">
					<ul>
						<li>
							<a href="">简体</a><span>|</span></li>
						<li>
							<a href="">繁体</a><span>|</span></li>
						<li>
							<a href="">English</a><span>|</span></li>
						<li>
							<a href="">常见问题</a>
						</li>
					</ul>
				</div>
				<div class="foot_bottom">
					<ul>
						<li>小米公司版权所有-京ICP备10046444-</li>
						<li><img src="img/ghs.png" /></li>
						<li>
							<a href="#">京公网安备11010802020134号</a>-京ICP证110507号</li>
					</ul>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var zhdl = document.getElementById("title_left");
			var smdl = document.getElementById("title_right");
			var yincang = document.getElementById("yincang");
			var userid = document.getElementById("userid");
			var mima = document.getElementById("pwd");
			var jg1 = document.getElementById("jinggao");
			var jg2 = document.getElementById("usernamenocorrect");
			var jg3 = document.getElementById("inputpwd");
			var jg4 = document.getElementById("unpwd");

			var panduan = false;

			function checkusername(t) {
				var username = userid.value;
				var rg = /^([A-z]([A-z]|\d){3,15})|((13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8})|(\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*)$/;
				if(username.trim() == "") {
					jg1.style.display = "inline";
					panduan = false;
				} else if(!(rg.test(username))) {
					jg2.style.display = "inline";
					panduan = false;
				} else {
					panduan = true;
				}
			}

			function clearname() {
				jg1.style.display = "none";
				jg2.style.display = "none";
				jg4.style.display = "none";

			}

			function pwdcheck() {
				var pwd = mima.value;
				var rg = /^([A-z]|\d){4,10}$/;
				if(pwd.trim() == "") {
					if(!(jg1.style.display == "inline"||jg2.style.display == "inline")){
					jg3.style.display = "inline";
						
					}

					panduan = false;
				} else {
					panduan = true;
				}
				if(!(rg.test(pwd))){
					jg3.style.display = "inline";
					panduan = false;
				}else {
					panduan = true;
				}
			}

			function clearpwd() {
				jg3.style.display = "none";
				jg4.style.display = "none";

			}

			function tijiao() {
				if(panduan == false) {
					jg4.style.display = "inline";
					jg1.style.display = "none";
					jg2.style.display = "none";
					jg3.style.display = "none";

				} else if(userid.value.trim() == "") {
					jg4.style.display = "inline";
				} else if(mima.value.trim() == "") {
					jg4.style.display = "inline";

				} else {
					document.getElementById("loginform").submit();
				}
			}

			function tile(t) {
				smdl.children[0].style.color = "#666";
				zhdl.children[0].style.color = "#F56600";
				yincang.style.display = "none";

			}

			function tiri(t) {
				smdl.children[0].style.color = "#F56600";
				zhdl.children[0].style.color = "#666";
				yincang.style.display = "block";
			}
		</script>
	</body>

</html>